<!--
 * @Author: Devin
 * @Date: 2022-04-22 15:17:12
 * @LastEditors: Devin
 * @LastEditTime: 2022-04-22 17:30:09
-->
<template>
  <div class="">
    <CcTable :columns="columns" stripe :data="tableData"> </CcTable>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, h } from '@vue/runtime-core';
export default defineComponent({
  name: '',
  props: {
    data: Array,
    tableType: {
      type: String,
      default: 'attr'
    }
  },
  components: {},
  setup(props) {
    const state: any = reactive({
      columns: [],
      tableData: []
    });
    if (props.tableType === 'attr') {
      state.columns = [
        { prop: 'attribute', label: '属性' },
        { prop: 'info', label: '说明', minWidth: 300 },
        {
          prop: 'type',
          label: '类型',
          render: ({ row }: { row: { type: any } }) => {
            return h(
              'code',
              { style: 'background-color:rgb(244, 244, 248);padding:3px;line-height:1;border-radius:2px;' },
              row.type
            );
          }
        },
        { prop: 'value', label: '可选值' },
        {
          prop: 'default',
          label: '默认值',
          render: ({ row }: { row: { default: any } }) => {
            return h(
              'code',
              { style: 'background-color:rgb(244, 244, 248);padding:3px;line-height:1;border-radius:2px;' },
              row.default
            );
          },
          minWidth: 100
        }
      ];
    } else if (props.tableType === 'event') {
      state.columns = [
        { prop: 'name', label: '事件名' },
        { prop: 'info', label: '说明' },
        { prop: 'cb', label: '回调参数' }
      ];
    } else if (props.tableType === 'fun') {
      state.columns = [
        { prop: 'name', label: '事件名' },
        { prop: 'info', label: '说明' },
        { prop: 'cs', label: '参数' }
      ];
    }
    state.tableData = props.data;
    return { ...toRefs(state) };
  }
});
</script>
<style scoped lang="scss">
:deep(.el-table--small) {
  font-size: 14px;
}
</style>
